<template>
  <card-layout title="环境监察报告" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="environment-report">
      <div class="report-content">
        <!-- 报告列表表格 -->
        <div class="report-table">
          <div class="table-container">
            <table class="report-list-table">
              <thead>
                <tr>
                  <th>报告名称</th>
                  <th>生成日期</th>
                  <th>报告日期</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(report, index) in reportList" :key="index">
                  <td class="report-name">{{ report.name }}</td>
                  <td class="report-date">{{ report.generateDate }}</td>
                  <td class="report-date">{{ report.reportDate }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
          <div class="page-controls">
            <button 
              class="page-btn" 
              :class="{ disabled: currentPage === 1 }"
              @click="prevPage"
            >
              &lt;
            </button>
            <span 
              v-for="page in visiblePages" 
              :key="page"
              class="page-number"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)"
            >
              {{ page }}
            </span>
            <button 
              class="page-btn"
              :class="{ disabled: currentPage === totalPages }"
              @click="nextPage"
            >
              &gt;
            </button>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { Close } from "@element-plus/icons-vue";

const emits = defineEmits(["close"]);

// 报告数据
const reportList = ref([
  {
    name: "XX煤矿生态修复工程",
    generateDate: "XXX",
    reportDate: "2025/5/10"
  },
  {
    name: "XX煤矿土地复垦监测报告",
    generateDate: "XXX",
    reportDate: "2025/5/10"
  },
  {
    name: "环境影响评估报告",
    generateDate: "XXX",
    reportDate: "2025/5/8"
  },
  {
    name: "生态恢复进度报告",
    generateDate: "XXX",
    reportDate: "2025/5/5"
  },
  {
    name: "土壤质量监测报告",
    generateDate: "XXX",
    reportDate: "2025/5/3"
  },
  {
    name: "水质监测年度报告",
    generateDate: "XXX",
    reportDate: "2025/5/1"
  },
  {
    name: "植被覆盖率调查报告",
    generateDate: "XXX",
    reportDate: "2025/4/28"
  },
  {
    name: "矿区环境综合评估",
    generateDate: "XXX",
    reportDate: "2025/4/25"
  }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const totalPages = computed(() => Math.ceil(reportList.value.length / pageSize.value));

// 可见页码
const visiblePages = computed(() => {
  const pages = [];
  const total = totalPages.value;
  const current = currentPage.value;
  
  if (total <= 7) {
    for (let i = 1; i <= total; i++) {
      pages.push(i);
    }
  } else {
    if (current <= 4) {
      for (let i = 1; i <= 5; i++) {
        pages.push(i);
      }
      pages.push('...');
      pages.push(total);
    } else if (current >= total - 3) {
      pages.push(1);
      pages.push('...');
      for (let i = total - 4; i <= total; i++) {
        pages.push(i);
      }
    } else {
      pages.push(1);
      pages.push('...');
      for (let i = current - 1; i <= current + 1; i++) {
        pages.push(i);
      }
      pages.push('...');
      pages.push(total);
    }
  }
  
  return pages;
});

// 分页方法
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const goToPage = (page) => {
  if (typeof page === 'number' && page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
};

const onClose = () => {
  emits("close");
};

onMounted(() => {
  // 组件挂载后的初始化逻辑
});
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}

.environment-report {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;

  .report-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    overflow-y: auto;

    .report-table {
      flex: 1;
      
      .table-container {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        overflow: hidden;
        
        .report-list-table {
          width: 100%;
          border-collapse: collapse;
          
          th {
            background: rgba(0, 212, 170, 0.2);
            color: #fff;
            padding: 12px 8px;
            font-size: 12px;
            font-weight: 500;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            
            &:first-child {
              width: 60%;
            }
            
            &:nth-child(2),
            &:nth-child(3) {
              width: 20%;
              text-align: center;
            }
          }
          
          td {
            padding: 10px 8px;
            font-size: 11px;
            color: #dedede;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            
            &.report-name {
              color: #fff;
              font-weight: 400;
            }
            
            &.report-date {
              text-align: center;
              color: #00d4aa;
            }
          }
          
          tbody tr:hover {
            background: rgba(255, 255, 255, 0.05);
          }
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px 0;
      
      .page-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .page-btn {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #fff;
          padding: 6px 10px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
          transition: all 0.2s;
          
          &:hover:not(.disabled) {
            background: rgba(0, 212, 170, 0.3);
            border-color: #00d4aa;
          }
          
          &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
        
        .page-number {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #fff;
          padding: 6px 10px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
          min-width: 32px;
          text-align: center;
          transition: all 0.2s;
          
          &:hover {
            background: rgba(0, 212, 170, 0.3);
            border-color: #00d4aa;
          }
          
          &.active {
            background: #00d4aa;
            border-color: #00d4aa;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>